<template>
  <div class="study_home">
      <router-link tag="div" class="notice" :to="{name:'study_notice'}">
          <span class="ico"><i class="iconfont icon-notice"></i></span>
          这是一条公告，一条很重要很重要的公告！这是一条公告，一条很重要很重要的公告！这是一条公告，一条很重要很重要的公告！这是一条公告，一条很重要很重要的公告！这是一条公告，一条很重要很重要的公告！
      </router-link>
      <div class="imgcanvas">
        <div class="tit">
            <div class="line"></div>
            <div class='txt'>学习中心</div>
        </div>
        <div class="cav">
            <canvas id="canvas" v-bind:width='width' v-bind:height='width'></canvas>
            <img src="../../assets/images/study/canvas.png" style="display:none;" id="cavimg">
        </div>
      </div>
      <div class="over">
          今日完成任务数<font class="num">7</font>，击败<font class="percentage">68%</font>的同事
      </div>
      <!-- 进行中 -->
      <div class="ongoing">
        <div class="tit">
            <div class="line"></div>
            <div class='txt'>进行中</div>
            <router-link tag="div" class="more" :to="{path:'/task/ongoing'}">
            更多
            </router-link>
        </div>
        <ul class="all_class">
            <li v-for="n in 5">
                <div class="left">
                    <img :src=" src|renderImg(330,240)" alt="">
                </div>
                <div class="right">
                    <div class="name">时间管理八法</div>
                    <div class="type_time">
                        <div class="type">视频慕课</div>
                        <div class="time">3天后截止</div>
                    </div>
                    <div class="class"><i class="iconfont icon-class"></i>中级干部培训班</div>
                </div>
            </li>
             <list-empty msg='点此添加任务，开始学习吧~'></list-empty>
        </ul>
      </div>
      <!-- 未开始 -->
       <div class="ongoing">
        <div class="tit">
            <div class="line"></div>
            <div class='txt'>未开始</div>
            <router-link tag="div" class="more" :to="{path:'/task/notstart'}">
            更多
            </router-link>
        </div>
        <ul class="all_class">
            <li v-for="n in 5">
                <div class="left">
                    <img :src=" src|renderImg(330,240)" alt="">
                </div>
                <div class="right">
                    <div class="name">时间管理八法</div>
                    <div class="type_time">
                        <div class="type">视频慕课</div>
                        <div class="time">3天后截止</div>
                    </div>
                    <div class="class"><i class="iconfont icon-class"></i>中级干部培训班</div>
                </div>
            </li>
             <list-empty msg='点此发现更多有趣课程~'></list-empty>
        </ul>
      </div>
      <!-- 已完成 -->
       <div class="ongoing">
        <div class="tit">
            <div class="line"></div>
            <div class='txt'>已完成</div>
            <router-link tag="div" class="more" :to="{path:'/task/completed'}">
            更多
            </router-link>
        </div>
        <ul class="all_class">
            <li v-for="n in 5">
                <div class="left">
                    <img :src=" src|renderImg(330,240)" alt="">
                </div>
                <div class="right">
                    <div class="name">时间管理八法</div>
                    <div class="type_time">
                        <div class="type">视频慕课</div>
                        <div class="time">3天后截止</div>
                    </div>
                    <div class="class"><i class="iconfont icon-class"></i>中级干部培训班</div>
                </div>
            </li>
            <list-empty msg='暂无完成的任务，努力学习吧~'></list-empty>
        </ul>
      </div>
      <!-- 已过期 -->
       <div class="ongoing">
        <div class="tit">
            <div class="line"></div>
            <div class='txt'>已过期</div>
            <router-link tag="div" class="more" :to="{path:'/task/overdue'}">
            更多
            </router-link>
        </div>
        <ul class="all_class">
            <li v-for="n in 5">
                <div class="left">
                    <img :src=" src|renderImg(330,240)" alt="">
                </div>
                <div class="right">
                    <div class="name">时间管理八法</div>
                    <div class="type_time">
                        <div class="type">视频慕课</div>
                        <div class="time">3天后截止</div>
                    </div>
                    <div class="class"><i class="iconfont icon-class"></i>中级干部培训班</div>
                </div>
            </li>
            <list-empty msg='没有过期任务，棒棒哒~' imgIcon='emp'></list-empty>
        </ul>
      </div>
      <!-- 回到顶部按钮 -->
      <div class="scroll_top" :style='scrollstyle' v-on:click='scroll_top()'><i class="iconfont icon-top"></i></div>
  </div>
</template>

<script>
// import Vue from 'vue'
import listEmpty from "@/components/logic/list_empty";
export default {
  name: "study_home",
  components: {
    listEmpty
  },
  data() {
    return {
      width: "",
      src: "https://f12.baidu.com/it/u=447933162,283594513&fm=72",
      scrollstyle: {
        opacity: 0.4
      }
    };
  },
  created() {
    var _this = this;
    var wd = parseInt(100);
    _this.width = wd * 2.62;
  },
  mounted: function() {
    this.$nextTick(function() {
      this.canvas();
    });
  },
  methods: {
    //   点击回到底部
    scroll_top: function() {
      var _this = this;
      clearInterval(timer);
      var timer = setInterval(function() {
        let curHeight =
          document.documentElement.scrollTop || document.body.scrollTop; // 得到当前高度
        var now = curHeight;
        var speed = (0 - now) / 5; // 随着高度减速
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        if (curHeight === 0) {
          //当前高度为零,停止这次计时器
          clearInterval(timer);
        }
        document.documentElement.scrollTop = curHeight + speed; //直接给高度赋值,会调用needtotop方法
        document.body.scrollTop = curHeight + speed; //谷歌的
        stop = false;
      }, 30);
      _this.scrollstyle = {
        opacity: 2
      };
      setTimeout(function() {
        _this.scrollstyle = {
          opacity: 0.3
        };
      }, 3000);
    },
    //   画图
    canvas() {
      const canvas = document.querySelector("#canvas");
      var ctx = canvas.getContext("2d");
      var img = document.getElementById("cavimg");
      img.onload = function() {
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "#ffffff";
        ctx.font = "10px Courier New";
        ctx.textAlign = "center";
        ctx.fillText("进行中", 50, 70);
        ctx.fillText("已过期", 203, 70);
        ctx.fillText("未开始", 50, 220);
        ctx.fillText("已完成", 203, 220);
        // 写课程数
        ctx.font = "15px Courier New";
        ctx.fillText("7", 50, 55);
        ctx.fillText("3", 203, 55);
        ctx.fillText("20", 50, 205);
        ctx.fillText("37", 203, 205);
        // 画百分数字
        ctx.font = "20px Courier New";
        ctx.fillStyle = "#d49430";
        ctx.fillText("12", 120, 60);
        ctx.fillStyle = "#8685a9";
        ctx.fillText("20", 40, 135);
        ctx.fillStyle = "#d65b75";
        ctx.fillText("3", 200, 135);
        ctx.fillStyle = "#62d7da";
        ctx.fillText("45", 120, 215);
        // 画%号
        ctx.font = "20px Courier New";
        ctx.fillStyle = "#333333";
        ctx.fillText("%", 140, 60);
        ctx.fillText("%", 60, 135);
        ctx.fillText("%", 220, 135);
        ctx.fillText("%", 140, 215);
        // 画圆开始
        ctx.beginPath();
        ctx.lineWidth = 10;
        ctx.strokeStyle = "#ff7888";
        ctx.arc(
          canvas.width / 2,
          canvas.height / 2,
          50,
          0,
          30 * Math.PI / 180,
          false
        );
        ctx.stroke();
        ctx.closePath();
        ctx.beginPath();
        ctx.lineWidth = 10;
        ctx.strokeStyle = "#74f7f7";
        ctx.arc(
          canvas.width / 2,
          canvas.height / 2,
          50,
          30 * Math.PI / 180,
          80 * Math.PI / 180,
          false
        );
        ctx.stroke();
        ctx.closePath();
        ctx.beginPath();
        ctx.lineWidth = 10;
        ctx.strokeStyle = "#bdbde5";
        ctx.arc(
          canvas.width / 2,
          canvas.height / 2,
          50,
          80 * Math.PI / 180,
          230 * Math.PI / 180,
          false
        );
        ctx.stroke();
        ctx.closePath();
        ctx.beginPath();
        ctx.lineWidth = 10;
        ctx.strokeStyle = "#d39330";
        ctx.arc(
          canvas.width / 2,
          canvas.height / 2,
          50,
          230 * Math.PI / 180,
          360 * Math.PI / 180,
          false
        );
        ctx.stroke();
        ctx.closePath();
        // 全部任务数
        ctx.font = "30px Courier New";
        ctx.fillText("75", 130, 130);
        ctx.font = "12px Courier New";
        ctx.fillStyle = "#5e6380";
        ctx.fillText("全部任务数", 130, 160);
      };
    }
  }
};
</script>
<style scoped lang='less'>
.study_home {
  background: #f0f1f4;
  .notice {
    background: #ffffff;
    height: 0.4rem;
    font-size: 0.13rem;
    padding: 0 0.15rem;
    line-height: 0.4rem;
    color: #545454;
    word-wrap: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    .ico {
      display: inline-block;
      height: 0.4rem;
      line-height: 0.4rem;
      color: #4fd19a;
      margin-right: 0.1rem;
    }
  }
  .imgcanvas {
    margin-top: 0.05rem;
    padding: 0.15rem;
    background: #ffffff;
    .tit {
      height: 0.16rem;
      line-height: 0.16rem;
      display: flex;
      .txt {
        flex: 1;
        padding-left: 0.08rem;
        height: 0.16rem;
        line-height: 0.16rem;
        color: #333333;
        font-size: 0.14rem;
      }
    }
    .cav {
      padding: 0.13rem 0;
      text-align: center;
    }
  }
  .over {
    height: 0.75rem;
    line-height: 0.75rem;
    font-size: 0.14rem;
    color: #545454;
    text-align: center;
    background: url("../../assets/images/study/cup.png");
    margin-top: 0.05rem;
    .num {
      color: #24ceae;
      font-size: 0.28rem;
      padding: 0 0.05rem;
    }
    .percentage {
      color: #24ceae;
    }
  }
  .ongoing {
    padding: 0 0.15rem;
    margin-top: 0.05rem;
    background: #ffffff;
    .tit {
      display: flex;
      padding: 0.15rem 0;
      .txt {
        flex: 1;
        color: #333333;
        height: 0.16rem;
        line-height: 0.16rem;
        padding-left: 0.08rem;
      }
      .more {
        width: 0.5rem;
        text-align: right;
        color: #24ceae;
        height: 0.16rem;
        line-height: 0.16rem;
      }
    }
    .all_class {
      padding: 0 0.15rem;
      li {
        border-top: 0.01rem solid #f0f1f4;
        padding: 0.15rem 0;
        display: flex;
        .left {
          width: 1.1rem;
          height: 0.8rem;
          border-radius: 0.05rem;
          img {
            width: 1.1rem;
            height: 0.8rem;
            border-radius: 0.05rem;
          }
        }
        .right {
          flex: 1;
          padding-left: 0.13rem;
          .name {
            height: 0.24rem;
            line-height: 0.24rem;
            color: #333333;
          }
          .type_time {
            padding: 0.1rem 0 0.12rem 0;
            display: flex;
            .type {
              color: #999999;
              height: 0.13rem;
              font-size: 0.12rem;
              line-height: 0.13rem;
            }
            .time {
              color: #999999;
              height: 0.13rem;
              line-height: 0.13rem;
              font-size: 0.12rem;
              margin-left: 0.05rem;
              padding-left: 0.05rem;
              border-left: 0.01rem solid #adadad;
            }
          }
          .class {
            height: 0.22rem;
            line-height: 0.22rem;
            color: #5f5f5f;
            font-size: 0.13rem;
            i {
              color: #2cba8d;
              font-weight: 800;
            }
          }
        }
      }
    }
  }
  .scroll_top {
    width: 0.45rem;
    height: 0.45rem;
    background: #4fd19a;
    border-radius: 50%;
    text-align: center;
    line-height: 0.45rem;
    color: #ffffff;
    position: fixed;
    top: 50%;
    right: 0.15rem;
    transition: 2s;
    i {
      font-size: 0.25rem;
    }
  }
}
</style>
